// Vendors

@function assets($item){
  @return '../assets/' + $item
}
//============================= FontAwesome =============================//
/* override FontAwesome font path $var */
$fa-font-path: assets('fonts');

// ProtonMail Theme variables 🎨
//============================= Breakpoints =============================//
$desktop:			1200px;
$tablet-landscape:	1030px;
$tablet-portrait:	800px;
$mobile-landscape: 	640px;
$mobile-portrait: 	480px;
$mobile-tiny: 	    350px;

//============================= Sizes =============================//
$sidebarWidth: 		190px;
$sidebarMobWidth: 	220px;
$sidebarRowHeight:	36px;
$headerHeight: 		61px;
$toolbarHeight: 	63px;
$contactsToolbar:   56px;
$rowHeight: 		36px;
$composerRowHeight: 32px;
$inputHeight: 		32px;
$toggleWidth: 		4.4rem;
$short: 			770px;
$panel:				400px;
$pm_loading: 		50px;
$maxHeight: 		auto;
$sidebar-padding:   0 20px;
$sizeColorListItem: 1.4em;

//============================= Generic =============================//
$white: 			#FFF;
$black:             #000;
$light: 			#f4f4f4;
$orange:			#ff6600;
$yellow:			#fded87;
$yellow-star:       #dfdf19;
$dark:				#4d4c5d;
$blue: 				#93b9cc;
$light-blue:        #5fdefb;
$blue-gray:         #AEAEBA;
$green:				#a6cc93;
$light-green: 		#d3f422;
$red:				#cc9393;
$bug:				#fc2929;
$feature:			#009800;
$exp:				#ec6446;
$text:				#222;
$pgp:				#090;
$tags:				#d4d7dc;
$tour:				#34cc69;
$gray:              #acb0bf;
$alt-light:         #CCC;
$gray-light:        #CCC;
$danger:            #cf9696;
$warning:           $yellow;
$red-stripped:      repeating-linear-gradient(45deg, #F35D5D, #F35D5D 10px, #EC424A 10px, #EC424A 20px);
$yellow-stripped:   repeating-linear-gradient(45deg, #FCF785, #FCF785 10px, #EFEA62 10px, #EFEA62 20px);
$alert:             #f0f0f0;
$discount:          #FF5400;
$composerRowBackground: #F7F7F7;
//============================= Backgrounds =============================//
$primary: 			       #9397cd;
$primary-light:            lighten($primary, 23);
$primary-extra-light:      lighten($primary, 27);
$secondary: 		       #505061;
$tertiary:		           #e6eaf0;

//== Component Specific
$body-background:          $secondary;
$body-background-size:     cover;
$main-background:          #FFF;
$message-backgroud:        #FFF;
$header-background:		   #6a6f7c;
$search-form-background:   set-invert-color($header-background, darken(rgba($header-background, .2), 50));
$sidebar-background:       $secondary;
$sidebar-active:           #5A5A6A;
$logo-background:		   $sidebar-background;
$composer-btn-background:  $primary;
$composer-background:      #FFF;
$composer-header-backgourd:$secondary;
$read-background:          $tertiary;
$active-background:		   #828895;
$scrollbar-primary:        #E6EAF0;
$scollbar-secondary:       #848995;
$button-background:        #FFFFFF;
$button-background-focus:  #f2f2f2;
$button-background-active: #e5e5e5;

$toolbar-background: #F7F7F7;
$toolbar-border: #e0e2e5;

//================================ Plans ===============================//
$vpnbasic: #f67f60;
$vpnplus: #9ccc23;
$visionary: #6ddcfb;
$plus: #C6E422;
$professional: #D4B46E;
$vpn: #6BB16F;

//============================= Typography =============================//
$default-color:             #555;
$default-color-medium:      lighten($default-color, 10);
$default-color-light:       lighten($default-color, 55);
$default-color-hover:       #333;
//==  Component Specific
$main-color:                set-invert-color($tertiary, $default-color);
$composer-color:            set-invert-color($composer-background, $default-color);
$sidebar-color:             set-color($sidebar-background, $white);
$header-font-color:         set-color($header-background,$white);
$search-placeholder-color:  rgba($header-font-color, .75);
$button-color:              #666;
$button-color-disabled:     #acb0bf;
$button-color-focus:        #222;
$message-placeholder-color: #acb0bf;


//============================= Borders =============================//
$border: 			    #acb0bf;
$border-radius:         2px;
$border-radius-large:   4px;
$border-radius-larger:  8px;
// --- Component Specific
$main-radius:           0;


//============================= Shadows =============================//
$box-shadow:		    1px 1px 3px rgba($black, 0.33), 0 0 2px rgba($black, 0.33);
//== Component Specific
$main-shadow:           none;


//============================= BG IMAGE =============================//
// Tooltip: IMG as background
// $body-background:       url(assets("img/login.jpg"));
// $header-background:	    transparent;
// $sidebar-background:    transparent;
// $logo-background:       transparent;
// $main-shadow:           inset 0 0 5rem #000;
// $main-radius:           $border-radius 0 0 0;
